import React, { useRef, useEffect, useState } from 'react'
import { NavigationStackScreenComponent } from 'react-navigation-stack'
import { View, Text, Image, TouchableOpacity, FlatList, DatePickerAndroid } from 'react-native'
import { commonStyle } from 'styles'
import { ShortBar, InfoLayout } from 'components'
import assets from 'modules/assets'
import { tradeListStyle } from './styles'
import pos, { PosGetInOutput } from 'api/pos';
import { operate } from 'services/authorization';

const GetinListScreen: NavigationStackScreenComponent<{ erpFeeId: string }> = props => {
	// const date = new Date();
	// const currentDate = useRef<{ year: number, month: number, day: number }>({
	// 	year: date.getFullYear(),
	// 	month: date.getMonth(),
	// 	day: date.getDay()
	// });
	// useEffect(() => {
	// 	props.navigation.setParams({
	// 		currentDate
	// 	});
	// });
	const [posGetinList, setPosGetinList] = useState<PosGetInOutput[]>([])
	const [noData, setNoData] = useState(false)
	useEffect(() => {
		let erpId = props.navigation.getParam('erpFeeId')
		if (erpId) {
			pos.posApp.getGetInByFeeId({ erpId }).then(result => {
				result && setPosGetinList(result || [])
				setNoData(result.length < 1)
			})
		}
	}, [])

	return (
		<View style={[commonStyle.containerColumn, tradeListStyle.container]}>
			{noData ? (<Text style={commonStyle.noDataWarn}>未找到收款记录！</Text>) :
				<FlatList
					style={tradeListStyle.container}
					data={posGetinList}
					renderItem={(item) => {
						return item.item.posGetIn ?
							(
								<TouchableOpacity
									onPress={() => {
										operate()
										props.navigation.navigate('TradeDetail', { posGetin: item.item })
									}}>
									<View
										key={item.index}
										style={[commonStyle.containerColumn, tradeListStyle.timeContainer]}>
										<ShortBar style={tradeListStyle.itemTitle} title={item.item.posGetIn.billNo} />
										<InfoLayout title="客户:" content={item.item.allCustomerName || ''} />
										<InfoLayout title="实收金额:" content={item.item.posGetIn.amount} />
										<InfoLayout title="收款时间:" content={`${item.item.posGetIn.date} ${item.item.posGetIn.time}`} />
									</View>
								</TouchableOpacity>
							) : ('')
					}}
				/>
			}
		</View>
	)
}

GetinListScreen.navigationOptions = props => {
	return {
		title: '交易明细',
		// headerRight: (
		// 	<TouchableOpacity
		// 		style={tradeListStyle.headerRightContainer}
		// 		onPress={() => {
		// 			// let currentDate = props.navigation.getParam('currentDate');
		// 			DatePickerAndroid.open({
		// 				date: new Date(),
		// 			})
		// 				.then(result => {
		// 					// if (result.action !== DatePickerAndroid.dismissedAction) {
		// 					// 	currentDate.current.year = result.year;
		// 					// 	currentDate.current.month = result.month;
		// 					// 	currentDate.current.day = result.day;
		// 					// 	props.navigation.setParams({
		// 					// 		currentDate
		// 					// 	})
		// 					// }
		// 				})
		// 				.catch(error => { })
		// 		}}>
		// 		<Image style={tradeListStyle.headerIcon} source={assets.images.icon_calendar} />
		// 	</TouchableOpacity>
		// ),
	}
}

export default GetinListScreen
